<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>823680621@qq.com</title>
</head>
<style>
*{margin:0;padding: 0;}
	body{background: black;}
	
	
	 .box,.box div{display: flex;
		margin:auto;
		border:1px solid white;
		border-radius: 100%;}
	.box{width: 300px;height: 300px;
		margin:100px auto;
		border:1px solid white;
		position: relative;
	}
	.box>div{width: 200px;height: 200px;}
		.box span{width: 5px;height: 5px;background: yellow;position: absolute;
			border-radius: 100%;
			animation: king 3s 1.5s  infinite;}
		.sp1{right: 10px;top: 50%;}
		.sp2{right: 35px;top: 50%;}
		.sp3{right: 25px;top: 50%;}
	.box>div>div{width: 100px;height: 100px;}
	.box>div>div>div{width: 0;height: 0;}
	.box>div>div>div>p{position: absolute;top: 0;left: 0;
		width: 300px;height: 150px;
		background: linear-gradient(128deg,
			rgba(9,89,191,0.8) 0%,
			rgba(9,89,191,0.02) 70%,
			transparent 100%
			 );
		border-radius: 50% 50% 0 0/100% 100% 0 0;/*圆上50% 右50% 下左0/渐变到 上100% 右100% 下左0*/
		/*更改旋转基点*/
		/*transform-origin:50% 100%;*/ 
		transform-origin:center bottom;
	}
	.run{animation: play 3s infinite linear;}

	@keyframes play{
		0%{transform: rotate(0deg);}
		100%{transform: rotate(-360deg);}
	}
	@keyframes king{
		0%{width: 5px;height:5px;}
		100%{width: 0;height: 0;}
	}
</style>
<body>
	<div class="box">
		<div>
			<div>
				<div><p class="run"></p></div>
			</div>
			
		</div>
		<span class="sp1"></span>
		<span class="sp2"></span>
		<span class="sp3"></span>
	</div>	
</body>
</html>